<template>
    <div class="login">
        <el-form :model="loginList" :rules="rules" ref="loginForm" label-width="100px" class="loginForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="loginList.username" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="loginList.password" clearable show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="login" @keyup.enter="keyDown(e)" type="primary">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { userlogin } from '../request/api.js';
export default {
    data() {
        return {
            loginList: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        login() {
            //调用整体的表单验证函数
            this.$refs.loginForm.validate((val) => {
                if (val) {
                    userlogin(this.loginList).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            //valid 就是验证成功失败返回的boolean
                            // console.log(valid,'111111');
                            this.$message.success(res.msg);
                            //先存储用户信息
                            this.$store.dispatch('changeUserAction', res.list);
                            //跳转index
                            this.$router.push('/index')
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        },
        // 点击回车键登录
        keyDown(e) {
            // 回车则执行登录方法 enter键的ASCII是13
            if (e.keyCode == 13 || e.keyCode == 100) {
                this.login(); // 定义的登录方法
            }
        },
        resetForm() {
            this.$refs.loginForm.resetFields();
        }
    },
    mounted() {
        // 绑定监听事件
        window.addEventListener("keydown", this.keyDown);
        history.pushState(null, null, document.URL);
        window.addEventListener("popstate", function (e) {

            history.pushState(null, null, document.URL);

        }, false);
    },
    destroyed() {
        // 销毁事件
        window.removeEventListener("keydown", this.keyDown, false);
    },

}
</script>

<style scoped>
.login {

    width: 100vw;
    height: 100vh;
    background: url(../assets/cool-background.png);
}

.loginForm {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 400px;
    height: 350px;
    margin: -150px 0 0 -250px;
}
</style>